<template>
  <view class="container">
    <!-- 协议头部 -->
    <view class="agreement-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">青理乐送</text>
      <text class="subtitle">隐私政策</text>
    </view>

    <!-- 协议内容 -->
    <scroll-view class="agreement-content" scroll-y>
      <view class="content-container">
        <view class="section">
          <text class="section-title">1. 信息收集清单</text>
          <view class="table-container">
            <view class="table-row header">
              <text class="table-cell">信息类型</text>
              <text class="table-cell">用途</text>
              <text class="table-cell">处理方式</text>
            </view>
            <view class="table-row">
              <text class="table-cell">微信OpenID</text>
              <text class="table-cell">账号登录</text>
              <text class="table-cell">永久存储</text>
            </view>
            <view class="table-row">
              <text class="table-cell">手机号</text>
              <text class="table-cell">配送员联系/取餐码</text>
              <text class="table-cell">正常显示</text>
            </view>
          </view>
        </view>

        <view class="section">
          <text class="section-title">2. 特别说明（校园场景）</text>
          <text class="section-text">地址信息：包含收货地址（宿舍楼、单元、室号等），用于订单配送服务</text>
        </view>

        <view class="section">
          <text class="section-title">3. 用户权利</text>
          <text class="section-text">联系客服（keketrtr@126.com）要求删除账号</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="agree-btn" @click="goBack">同意并返回</button>
    </view>
  </view>
</template>

<script setup>

const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #fff8f8 0%, #fff5f7 50%, #fff8fa 100%);
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
}

.agreement-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;

  .logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    border-radius: 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.2);
  }

  .title {
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    letter-spacing: 2rpx;
  }

  .subtitle {
    font-size: 32rpx;
    color: #666;
    letter-spacing: 1rpx;
  }
}

.agreement-content {
  flex: 1;
  margin-bottom: 40rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.content-container {
  .section {
    margin-bottom: 40rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .section-text {
      font-size: 28rpx;
      line-height: 1.8;
      color: #666;
      margin-bottom: 10rpx;
      display: block;
    }
  }
  
  .table-container {
    width: 100%;
    margin-bottom: 30rpx;
    border-radius: 16rpx;
    overflow: hidden;
    border: 1rpx solid #f0f0f0;
    
    .table-row {
      display: flex;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.header {
        background-color: #f8f8f8;
        font-weight: 600;
      }
      
      .table-cell {
        flex: 1;
        padding: 20rpx;
        font-size: 28rpx;
        color: #666;
        text-align: center;
        
        &:not(:last-child) {
          border-right: 1rpx solid #f0f0f0;
        }
      }
    }
  }
}

.footer {
  .agree-btn {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
    color: #fff;
    border-radius: 45rpx;
    font-size: 32rpx;
    font-weight: 500;
    box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.2);
    border: none;

    &:active {
      background: linear-gradient(135deg, #ff8a8e 0%, #ff5b5b 100%);
    }
  }
}
</style>